<script setup lang="ts">
import { useRouter } from 'vue-router';

import { $t } from '@vben/locales';

import { Button } from 'ant-design-vue';

import Icon from '#/components/Icons';

defineOptions({
  name: 'ThirdPartyLogin',
});
const router = useRouter();
function handleGo(type: string) {
  router.push(`qrcode-login/oauth/${type}`);
}
</script>

<template>
  <div class="w-full sm:mx-auto md:max-w-md">
    <div class="mt-4 flex items-center justify-between">
      <span class="border-input w-[35%] border-b dark:border-gray-600"></span>
      <span class="text-muted-foreground text-center text-xs uppercase">
        {{ $t('authentication.thirdPartyLogin') }}
      </span>
      <span class="border-input w-[35%] border-b dark:border-gray-600"></span>
    </div>

    <div class="mt-4 flex flex-wrap justify-center gap-2">
      <Button class="mb-3" shape="circle" @click="handleGo('wechat')">
        <template #icon>
          <span class="anticon">
            <Icon icon="ri:wechat-fill" />
          </span>
        </template>
      </Button>
      <!-- <Button class="mb-3" shape="circle">
        <template #icon>
          <span class="anticon">
            <Icon icon="ri:qq-fill" />
          </span>
        </template>
      </Button> -->
    </div>
  </div>
</template>
